<template>
    <view>
        <p class="head-tag">身高（米）</p>
        <nut-input v-model="height" placeholder="身高" input-align="center" type="digit" />
        <p class="head-tag">体重（公斤）</p>
        <nut-input v-model="weight" placeholder="体重" input-align="center" type="digit" />
        <p class="head-tag">BMI</p>
        <nut-input v-model="bmi" placeholder="BMI" input-align="center" type="digit" readonly />
        <p>&nbsp;</p>
        <nut-row type="flex" justify="center">
            <nut-col :span="4"></nut-col>
            <nut-col :span="16">
                <nut-button size="large" shape="square" type="primary" @click="calc">计算</nut-button>
                <nut-button size="large" shape="square" type="default" @click="init">重置</nut-button>
            </nut-col>
            <nut-col :span="4"></nut-col>
        </nut-row>

        <h3 class="block">
            &nbsp;
        </h3>
        <p class="block">BMI参考值</p>
        <nut-row type="flex" justify="center">
            <nut-col :span="24">
                
                <nut-table :columns="columns" :data="data" striped></nut-table>
            </nut-col>
        </nut-row>
        <h3 class="block">
            &nbsp;
        </h3>
        <p class="block">如何保持良好的BMI</p>
        <nut-row type="flex" justify="center">
            <nut-col :span="24">
                <p> {{ adv1 }}</p>
            </nut-col>
        </nut-row>


        <br />
        <br />
    </view>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import './bmi.styl'
const height = ref('')
const weight = ref('')



const bmi = ref('')

const init = () => {
    height.value = ''
    weight.value = ''
    bmi.value = ''

}

const calc = () => {
    bmi.value = (weight.value / (height.value * height.value)).toFixed(2)
}

const columns = ref([
    {
        title: '体重过低',
        key: 'low'
    },
    {
        title: '正常',
        key: 'nor'
    },
    {
        title: '超重',
        key: 'hight'
    },
    {
        title: '肥胖',
        key: 'fat'
    }
])


const data = ref([
    {
        low: 'BMI<18.5',
        nor: '18.5≤BMI<24',
        hight: '24≤BMI<28',
        fat: '28≤BMI'
    },
])

const adv1 = "超重和肥胖，以及与之相关的非传染性疾病，在很大程度上是可以预防的。根据世卫组织的建议，人们可以：减少总脂肪和糖的能量摄入，增加水果、蔬菜以及豆类、全谷类及坚果的食用量，定期进行身体运动（儿童每天60分钟，成人每周150分钟）。建议密切关注BMI计算器，了解你的BMI变化，以保持良好和健康的体重。"

</script>
